//公司职位
import React, { Component } from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

import { SelposMobAction } from '../../../actions/postionAction';      //加载action
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import AsyncStorageUtil from '../../../util/AsyncStorageUtil';
import { selectoneStyle as styles } from '../../../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
import Selecttwo from './every/selecttwo';
import Selectfour from './every/selectfour';
import Select_state from './every/select_state';
import { myAlert } from '../../../util/compatible';

class Select extends Component {
    constructor(props) {            //构造器只执行一次
        super(props);
        this.state = {
            workspace: '全国',  //地点
            likeStr: '',       //职位名
            fields: [],        //行业
            salary: '',        //薪资
            fadate: '',         //日期     
            hopstate: false,   //显示历史记录或职位集合 
            dataSource: []
        };
    };

    componentDidMount() {
        AsyncStorageUtil.get("selposHis").then((data) => {
            if (data != null) {
                this.setState({ dataSource: data });
            }
        });
    }

    componentWillUnmount() {
        AsyncStorageUtil.save("selposHis", this.state.dataSource).then(() => {
            this.props.navigation.goBack();
        });
    }

    showSpace(space) {
        if (space) {
            if (space.length <= 3) {
                return space;
            } else {
                return space.substring(0, 3) + '...';
            }
        } else {
            return '全国';
        }
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#ffffff' }}>

                <View style={styles.seltop}>
                    <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('cityList', { 'callback': this.workspace.bind(this) });
                        }}
                        style={[styles.selout, { width: width * 0.2 }]}
                        activeOpacity={1}>
                        <Text style={styles.selplace}>{this.showSpace(this.state.workspace)}</Text>
                        <Icon
                            name={'ios-arrow-down'}
                            size={15}
                            color={'#333333'} style={styles.selarrow} />
                    </TouchableOpacity>

                    {/* 搜索框 */}
                    <View style={styles.selinput}>
                        <TextInput
                            style={[styles.selinputin, { width: width * 0.62 }]}
                            placeholder="搜索职位"
                            underlineColorAndroid="transparent"
                            onChangeText={this._likeStr.bind(this)}
                            defaultValue={this.state.likeStr}
                            autoFocus={true}
                        />
                        <Icon
                            name={'md-search'}
                            size={20}
                            color={'#aeaeae'} style={styles.selicon1} />
                    </View>

                    <TouchableOpacity onPress={() => {
                        const aa = {
                            page: 1,
                            likeStr: this.state.likeStr,
                            workspace: this.state.workspace,
                            fields: this.state.fields,
                            salary: this.state.salary,
                            fadate: this.state.fadate
                        }
                        if (this.state.likeStr) {
                            this.props.actions.SelposMobAction(aa);
                            this.dataSource(this.state.likeStr);
                            this.setState({ hopstate: true });
                        }else{
                            myAlert('请输入查询内容')
                        }
                    }} style={styles.selno} activeOpacity={1}>
                        <Text style={styles.text}>搜索</Text>
                    </TouchableOpacity>
                </View >

                {this.state.hopstate ?
                    <Selectfour
                        workspace={this.state.workspace}
                        likeStr={this.state.likeStr}
                        postions={this.props.postions.data}
                        isloading={this.props.postions.isloading}
                        ret={this.props.postions.ret}
                        actions={this.props.actions}
                        navigation={this.props.navigation}
                    />

                    :

                    <Select_state
                        delhis={this.delhis.bind(this)}
                        hopstate={this.hopstate.bind(this)}
                        _likeStr={this._likeStr.bind(this)}
                        addfields={this.addfields.bind(this)}
                        delefields={this.delefields.bind(this)}
                        _salary={this._salary.bind(this)}
                        _fadate={this._fadate.bind(this)}
                        dataSource={this.state.dataSource}
                        actions={this.props.actions}
                        workspace={this.state.workspace}
                    />
                }
            </View >
        )
    }

    //当前城市
    workspace(a) {
        this.setState({ workspace: a });
    }

    //职位查询名称
    _likeStr(a) {
        this.setState({ likeStr: a });
    }

    //显示历史记录或职位集合
    hopstate() {
        this.setState({ hopstate: true });
    }

    //删除历史记录
    delhis(a) {
        let list = this.state.dataSource;
        for (var i = 0; i < list.length; i++) {
            if (list[i] == a) {
                list.splice(i, 1);
            }
        }
        this.setState({ dataSource: list });
    }

    //添加搜索记录
    dataSource(data) {
        if (data != '') {
            let list = [];
            list = this.state.dataSource;
            if (list.length == 0) {
                list.push(data);
                this.setState({ dataSource: list });
            } else if (0 < list.length && list.length < 5) {
                let a = false;
                for (var i = 0; i < list.length; i++) {
                    if (list[i] == data) {
                        a = true;
                    }
                }
                if (!a) {
                    list.push(data);
                    this.setState({ dataSource: list });
                }
            } else if (list.length == 5) {
                let b = false;
                for (var i = 0; i < list.length; i++) {
                    if (list[i] == data) {
                        b = true;
                    }
                }
                if (!b) {
                    list.splice(0, 1);
                    list.push(data);
                    this.setState({ dataSource: list });
                }
            }
        }
    }

    //添加行业数据
    addfields(name) {
        let list = this.state.fields;
        list.push(name);
        this.setState({ fields: list });
    }

    //删除行业数据  
    delefields(name) {
        let list = this.state.fields;
        for (var i = 0; i < list.length; i++) {
            if (list[i] == name) {
                list.splice(i, 1);
            }
        }
        this.setState({ fields: list });
    }

    //添加薪资
    _salary(name) {
        if (name != this.state.salary) {
            this.setState({ salary: name });
        }
    }

    //添加日期
    _fadate(name) {
        if (name != this.state.fadate) {
            this.setState({ fadate: name });
        }
    }

}

//组合action
var actions = {
    SelposMobAction
}
//连接state到props
const mapStateToProps = state => {
    return {
        postions: state.SelposMobReducer             //自己的reducers
    }
}
//连接action
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps, mapDispatchToProps
)(Select);